<template lang="html">
  <div class="backSet">
    <ul>
      <li style="background:#fff;">
        <span class="choose gray">
          <el-checkbox class="check gray" :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
        </span>
        <span class="name gray">退款政策名</span>
        <span class="message gray">解释说明</span>
        <span class="operation gray">操作</span>
      </li>
      <el-checkbox-group v-model="checkedCities" @change="handleCheckedListChange">
      <li>
        <span class="choose">
           <el-checkbox class="check" :label="1" ></el-checkbox>
        </span>
        <span class="name">不可退换</span>
        <span class="message">特殊商品，购买后不可退换</span>
        <span class="operation green" @click="changeDialog(1)">编辑</span>
      </li>
      <li>
        <span class="choose">
           <el-checkbox class="check" :label="2" ></el-checkbox>
        </span>
        <span class="name">不可退换</span>
        <span class="message">特殊商品，购买后不可退换</span>
        <span class="operation green">编辑</span>
      </li>
      <li>
        <span class="choose">
           <el-checkbox class="check" :label="3" ></el-checkbox>
        </span>
        <span class="name">不可退换</span>
        <span class="message">特殊商品，购买后不可退换</span>
        <span class="operation green">编辑</span>
      </li>
     </el-checkbox-group>
     <div style="margin-top:10px; text-align:left;">
       <el-button type="success" size="small" >添加</el-button>
       <el-button type="danger" size="small" >删除</el-button>
     </div>
    </ul>

  </div>
</template>

<script>
const allList=[1,2,3];

export default {
  data(){
    return {
      checkAll: true,
      checkedCities:[1],
      isIndeterminate: true
    }
  },
  methods:{
    handleCheckedListChange:function (){

    },
    handleCheckAllChange(event) {
      this.checkedCities = event.target.checked ? allList : [];
      this.isIndeterminate = false;
    },
    changeDialog(type,id){
      var json1={
        'type':type,
        'name':'TanSetting',
        'id':id,
        'title':'退款配置详细'
      }
      this.$store.dispatch('changeDialog',json1);
    }
  }
}
</script>
<style lang="Sass">
  .backSet{.el-checkbox__label{font-size: 12px;}}
</style>
<style lang="Sass" scoped>
.backSet{
  ul{margin: 10px; background: #fff; list-style: none; padding: 5px 10px; border-radius: 4px;
    li{text-align: left; display: flex;
      span{display: inline-block; line-height: 30px; font-size: 12px;}
      .choose{flex: 0 0 100px;}
      .name{flex: 0 0 200px;}
      .message{flex: 1;}
      .operation{flex: 0 0 120px; cursor: pointer;}
    }
    li:nth-of-type(odd){background: #FAFAFC;}
  }
}
</style>
